<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="Bootstrap-Admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="../plugins/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../plugins/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
    <title>Bootstrap-Admin - 开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-light pt-2">
<div class="container-fluid">
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <div class="row">

                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-body">
                            <form action="#" id="form2">
                                <div class="mb-3 row">
                                    <label for="username2" class="col-sm-3 col-form-label">用户名</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="username2" name="username2" value="admin">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label for="email2" class="col-sm-3 col-form-label">邮箱</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="email2" name="email2" value="lujiahao@88.com">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label for="phone" class="col-sm-3 col-form-label">手机号</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="phone" name="phone" value="13784561032">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label for="gender2Radio1" class="col-sm-3 col-form-label">性别</label>
                                    <div class="col-sm-9">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="gender2"
                                                   id="gender2Radio1" value="先生" checked>
                                            <label class="form-check-label" for="gender2Radio1">先生</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="gender2"
                                                   id="gender2Radio2" value="女士">
                                            <label class="form-check-label" for="gender2Radio2">女士</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3 row">
                                    <label for="age2" class="col-sm-3 col-form-label">年龄</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="age2" name="age2" value="100">
                                    </div>
                                </div>


                                <div class="mb-3 row">
                                    <div class="col-sm-9 offset-sm-3">
                                        <button type="submit" class="btn btn-primary">保存更改</button>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                    <div class="card mt-3">
                        <div class="card-body">
                            <h5 class="d-flex align-items-center mb-3">技能熟练程度</h5>
                            <p>html</p>
                            <div class="progress mb-3" style="height: 5px">
                                <div class="progress-bar bg-primary" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <p>css</p>
                            <div class="progress mb-3" style="height: 5px">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: 72%" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <p>js</p>
                            <div class="progress mb-3" style="height: 5px">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 89%" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <p>php</p>
                            <div class="progress mb-3" style="height: 5px">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <p>mysql</p>
                            <div class="progress" style="height: 5px">
                                <div class="progress-bar bg-info" role="progressbar" style="width: 66%" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex flex-column align-items-center text-center">
                                <img src="https://temp.im/120x120"  alt="Admin" class="rounded-circle p-1 bsa-bg-color4 bsa-width-100">
                                <div class="mt-3">
                                    <h4>欲饮琵琶码上催</h4>
                                    <p class="text-secondary mb-1">超级管理员</p>
                                    <p class="text-muted font-size-sm">中国 贵州</p>
                                    <button class="btn btn-primary">关注</button>
                                    <button class="btn btn-outline-primary">消息</button>
                                </div>
                            </div>
                            <hr class="my-4">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                    <h6 class="mb-0"><i class="bi bi-globe bsa-font-20"></i> 个人网址</h6>
                                    <span class="text-secondary">https://xxxxxx.com</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                    <h6 class="mb-0"><i class="bi bi-github bsa-font-20"></i> Github</h6>
                                    <span class="text-secondary">ajiho</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>
</body>
</html>